<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="姓名" maxlength="30" class="col"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="form.phone" placeholder="联系方式" maxlength="11" class="col"></el-input>
      </el-form-item>
      <el-form-item label="微信二维码" prop="wxCode">
        <div class="imgList">
          <el-image v-if="form.wxCode !='' " :src="imageUrl + form.wxCode" class="img"
                    referrerpolicy="no-referrer">
          </el-image>
        </div>
        <el-button type="primary" @click="imgUploads.show=true" size="mini">选择图片</el-button>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="邮箱" maxlength="50" class="col"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="昵称" maxlength="30" class="col"></el-input>
      </el-form-item>
      <el-form-item label="管辖数量上限" prop="maxNum">
        <el-input v-model="form.maxNum" placeholder="管辖数量上限" maxlength="6" class="col"></el-input>
      </el-form-item>
      <el-form-item label="管辖地区" prop="areaId">
        <el-cascader class="col"
                     placeholder="可输入地区名称进行搜索"
                     v-model="form.value"
                     :options="options"
                     clearable
                     :props="{ expandTrigger: 'hover' }"
                     filterable
                     @change="handleChange"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit" v-has-permi="['admin:exclusiveService:save']">保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        :visible.sync="imgUploads.show"
        title="上传图片"
        :append-to-body="true"
        destroy-on-close
        :close-on-click-modal="false"
        width="1000px">
      <UploadFile
          v-if="imgUploads.show"
          :multiple="imgUploads.multiple"
          @getFile="getImage"
          ref="uploads"
      />
    </el-dialog>
  </div>

</template>
<script>
import {detail, optionsList, save} from "@/api/exclusiveService";
import {getForm} from "@/utils/utils";
import UploadFile from "@/components/File/UploadFile.vue";

export default {
  components: {UploadFile},
  props: {
    id: {
      default: null
    },
    businessTypeList: [],
  },
  data() {
    return {
      form: {
        id: null,
        name: '',
        phone: '',
        email: '',
        nickname: '',
        maxNum: '',
        areaId: '',
        cityId: '',
        value: '',
        wxCode: ''
      },
      value: [],
      imgUploads: {
        show: false,
        multiple: false,
      },
      options: [{
        value: '',
        label: '',
        children: [{
          value: '',
          label: '',
          children: [{
            value: '',
            label: ''
          }]
        }]
      }],
      showChoosePosition: false,
      rules: {
        name: [{required: true, message: '请填写姓名', trigger: ['blur']}],
        phone: [{required: true, message: '请填写联系方式', trigger: ['blur']}],
        maxNum: [{required: true, message: '请设置管辖数量上限', trigger: ['blur']}],
        areaId: [{required: true, message: '请选择管辖地区', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
      typeList: [{id: 1, name: "营业中"}, {id: 2, name: "未营业"},],
      imageUrl: '',
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    this.getOptions();
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getImage(fileList) {
      this.form.wxCode = fileList[0].url;
      this.imgUploads.show = false
    },
    handleChange(value) {
      this.form.value = value
      this.form.areaId = value[2]
      this.form.cityId = value[1]
    },
    getOptions() {
      optionsList().then(res => {
        this.options = res
      })
    },
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        getForm(res, this.form);
        this.value = res.value
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;

        save(this.form).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>

.col {
  width: 450px;
}

.img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
</style>
